<template>
  <div>
    <div class="tableDiv">
      <el-row style="margin-bottom:20px">
        <el-col :span="6">
          <div class="top-div">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <el-select v-model="value" placeholder="筛选">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div right">
           
            <el-button type="primary" icon="el-icon-plus" size="small" @click="handleClick"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="small"></el-button>
          </div>
        </el-col>
      </el-row>
    
      <el-table :data="tableData" style="width: 100%;margin-top:20px" class="custom-table">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="z" label="订单编号" width="auto"></el-table-column>
        <el-table-column prop="y" label="商品编码" width="auto"></el-table-column>
        <el-table-column prop="x" label="商品名称" width="auto"></el-table-column>
        <el-table-column prop="a" label="送货地址" width="auto"></el-table-column>
        <el-table-column prop="b" label="订单日期" width="auto"></el-table-column>
        <el-table-column prop="c" label="规格" width="auto"></el-table-column>
        <el-table-column prop="d" label="数量" width="auto"></el-table-column>
        <el-table-column prop="e" label="金额" width="auto"></el-table-column>
        <el-table-column prop="f" label="拣货方式" width="auto"></el-table-column>
        <el-table-column prop="j" label="拣货区域" width="auto"></el-table-column>
        <el-table-column prop="h" label="备注" width="auto"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="handleClick">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:20px">
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="拣货" :visible.sync="dialogVisible" width="800px">
        <div>
          <el-form :inline="true" :model="formInline" label-width="100px">
            <el-form-item label="商品编码">
              <el-input v-model="formInline.user1" placeholder="商品编码"></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="formInline.user2" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item label="送货地址">
              <el-input v-model="formInline.user3" placeholder="送货地址"></el-input>
            </el-form-item>
            <el-form-item label="订单日期">
              <el-date-picker v-model="formInline.user4" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="规格">
              <el-input v-model="formInline.user5" placeholder="规格"></el-input>
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="formInline.user6" placeholder="数量"></el-input>
            </el-form-item>
            <el-form-item label="金额">
              <el-input v-model="formInline.user7" placeholder="金额"></el-input>
            </el-form-item>
            <el-form-item label="拣货方式">
              <!-- <el-input v-model="formInline.user3" placeholder="数量"></el-input> -->
              <el-select v-model="value" placeholder="筛选">
              <el-option
                v-for="item in optns"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="拣货区域">
              <el-select v-model="value" placeholder="筛选">
              <el-option
                v-for="item in optns1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="formInline.user8" placeholder="请输入内容"></el-input>
            </el-form-item>
             
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      title: "",
      tableData: [
        {
          z: "DD123Y9009801",
          y: "x22292929299229",
          x: "内蒙古特产羊肋骨",
          a: "河南省洛阳市开元大道281号",
          b: "2024-08-15",
          c: "中",
          d: "358",
          e: "5,000.00",
          f: "传动运输带拣货",
          j: "区域一",
          h: "冷藏"
        },
        {
          z: "DD123Y9009802",
          y: "x344565767687888",
          x: "中性笔",
          a: "吉林省延吉市公园路22号",
          b: "2024-07-15",
          c: "中",
          d: "356",
          e: "870.00",
          f: "人工拣货",
          j: "区域二",
          h: "注意是否出油"
        },
        {
          z: "DD123Y9009803",
          y: "GH12Y3949494",
          x: "液压阀",
          a: "江苏省南通市长春路234号",
          b: "2024-07-15",
          c: "高",
          d: "500",
          e: "1,744.00",
          f: "手推车拣货",
          j: "区域三",
          h: ""
        },
        {
          z: "DD123Y9009804",
          y: "GH12Y3949494",
          x: "球阀",
          a: "江苏省南通市长春路234号",
          b: "2024-08-15",
          c: "低",
          d: "357",
          e: "560.00",
          f: "手推车拣货",
          j: "区域三",
          h: ""
        },
        {
          z: "DD368Y9002401",
          y: "x765433333234455",
          x: "多功能格尺",
          a: "吉林省延吉市公园路22号",
          b: "2024-02-15",
          c: "中",
          d: "365",
          e: "980.00",
          f: "人工拣货",
          j: "区域二",
          h: "注意是否出油"
        },
        {
          z: "DD368Y9002402",
          y: "GH12Y3944567",
          x: "压力表",
          a: "江苏省南通市长春路234号",
          b: "2024-01-15",
          c: "中",
          d: "480",
          e: "1,689.00",
          f: "机动作业车拣货",
          j: "区域三",
          h: ""
        },
        {
          z: "DD368Y9002403",
          y: "GH12Y392340",
          x: "轴承",
          a: "江苏省南通市长春路234号",
          b: "2024-02-25",
          c: "中",
          d: "1980",
          e: "6,866.00",
          f: "机动作业车拣货",
          j: "区域三",
          h: ""
        },
        {
          z: "DD368Y9002404",
          y: "x334555666666666",
          x: "内蒙古特产羊肋骨",
          a: "辽宁北镇猪手",
          b: "2024-09-05",
          c: "中",
          d: "145",
          e: "2,333.00",
          f: "传动运输带拣货",
          j: "区域一",
          h: "冷藏"
        }
      ],
      input: "",
      formInline: {
        user1: "",
        user2: "",
        user3: "",
        user4: "",
        user5: "",
        user6: "",
        user7: "",
        user8: "",
        region: ""
      },
      options: [
        {
          value: "选项1",
          label: "生活用品"
        },
        {
          value: "选项2",
          label: "装修"
        },
        {
          value: "选项3",
          label: "食品"
        },
        {
          value: "选项4",
          label: "文具"
        }
      ],
      optns: [
        {
          value: "选项1",
          label: "人工拣货"
        },
        {
          value: "选项2",
          label: "手推车拣货"
        },
        {
          value: "选项3",
          label: "传动运输带拣货"
        },
        {
          value: "选项4",
          label: "机动作业车拣货"
        }
      ],
      optns1: [
        {
          value: "选项1",
          label: "区域一"
        },
        {
          value: "选项2",
          label: "区域二"
        },
        {
          value: "选项3",
          label: "区域三"
        }
      ],
      value: "",
      value1: ""
    };
  },
  methods: {
    handleClick(data) {
      this.title = data;
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style scoped >
.top-div {
  width: 98%;
  background-color: #fff;
}
.right {
  /* padding-top: 4px; */
  line-height: 32px;
}
.tableDiv {
  background-color: #fff;
  /* margin-top: 20px; */
  padding: 20px;
}
.custom-table /deep/ .el-table__body td {
  font-size: 12px; /* 你想要的字体大小 */
}

.img-circle {
  width: 50px; /* 设置图片宽度 */
  height: 50px; /* 设置图片高度，与宽度相等 */
  border-radius: 50%; /* 设置四个角为圆角 */
  object-fit: cover; /* 确保图片内容适合容器大小 */
  vertical-align: middle;
  margin-right: 20px;
}
/deep/ .el-select {
  width: 100%;
  height: 42px;
}
/deep/ .el-date-editor {
  width: 100%;
}
/deep/ .el-input__inner {
  height: 32px;
}
/deep/ .el-input__icon {
  line-height: 32px;
}
</style>


